<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div class="">1111</div>
    <input type="text" id="demo" value="1"> -->
    <input type="range" id="r" class="colorRan" min="0" max="255" value="0"><span>0</span>
    <input type="range" id="g" class="colorRan" min="0" max="255" value="0"><span>0</span>
    <input type="range" id="b" class="colorRan" min="0" max="255" value="0"><span>0</span>
</body>
<script>
    // Element.setAttribute(key,val)
    // Element.getAttribute(key)
    // Element.removeAttribute(key)

    // data-xxx               asd="asd"
    // Element.dataset.xxx

    // div.innerHTML = div.innerHTML + "2222"

    // 重绘和回流(重排)  (了解)
    // HTML => DOM                     layout
    //                 attachment => render Tree  => print
    // css  => CSSOM

    // 属性节点
    // Element.setAttribute("class","one")

    // 元素节点的属性
    // 通用
    // innerHTML innerText textContent
    // outerHTML  outerText

    // className
    // classList

    // id
    // title
    // style

    // tagName
    // dataset

    // function getStyle(ele, key) {
    //     if (window.getComputedStyle) {
    //         return window.getComputedStyle(ele)[key];
    //     } else {
    //         return ele.currentStyle[key]
    //     }

    // }

    // 某些元素特有的
    // href  (a link)
    // src   (img script video)

    // type  name placeholder  value(表单元素的实际值)
    // min max step   cols rows  

    // checked  disabled  required   multiple


    var zhang = {
        name: "张三",
        age: 18,
    }
    // zhang["name"]  => 键名是字符串/对应变量取值
    // zhang.name     => 快捷取值

</script>
<script>

    var colorRanList = document.getElementsByClassName("colorRan");

    for (var i = 0; i < colorRanList.length; i++) {
        var colorRan = colorRanList[i];
        colorRan.oninput = function () {
            console.log(this);  // this->函数内置参数 (函数在调用时依存的对象)

            // span中显示当前值
            var val = this.value;
            this.nextElementSibling.textContent = val;

            // 依次提取三个滑条的值 放到数组中  => 拼接为rgb
            var list = [];
            for (var j = 0; j < colorRanList.length; j++) {
                var item = colorRanList[j];
                list.push(item.value);
            }
            console.log(list);

            document.body.style.backgroundColor = `rgb(${list.join(",")})`

        }
    }




</script>

</html>